<script lang="ts" setup>
import { provenanceSource } from '../../utils/provenanceSource'
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useProvenceSourceStore } from '../../store/provenanceSourceDialog'
const provenanceSourceStore = useProvenceSourceStore()
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<provenanceSource>({
    id: null,
    collectionId: null,
    acquisitionType: '',
    acquisitionDate: null,
    donorName: '',
    sourceDetail: '',
    certificateNo: '',
})
const rules: FormRules = {
}
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
        if (valid) {
            provenanceSourceStore.data= ruleForm
            provenanceSourceStore.changeOpen()
        }
    })
}
</script>
<template>
    <el-button plain @click="provenanceSourceStore.changeOpen" class="edit-btn">
        <el-icon>
            <Edit />
        </el-icon>
        编辑藏品来源
    </el-button>

    <el-dialog v-model="provenanceSourceStore.open" title="藏品来源信息编辑" width="600px" align-center
        class="provenance-dialog">
        <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" :rules="rules" label-position="top">
            <div class="form-container">
                <!-- 第一列 -->
                <div class="form-column">
                    <el-form-item label="藏品来源类型" prop="acquisitionType" class="form-item">
                        <el-select v-model="ruleForm.acquisitionType" placeholder="请选择来源类型" class="full-width">
                            <el-option label="捐赠" value="捐赠" />
                            <el-option label="购买" value="购买" />
                            <el-option label="考古发掘" value="考古发现" />
                            <el-option label="其他" value="其他" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="捐赠人/出售方" prop="donorName" class="form-item">
                        <el-input v-model="ruleForm.donorName" placeholder="请输入全称" clearable>
                            <template #prefix>
                                <el-icon>
                                    <User />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="入藏时间" prop="acquisitionDate" class="form-item">
                        <el-date-picker v-model="ruleForm.acquisitionDate" type="datetime" placeholder="选择具体日期"
                            value-format="YYYY-MM-DD HH:mm:ss" class="full-width" :shortcuts="[
                                { text: '今天', value: new Date() },
                                { text: '一周前', value: () => new Date(Date.now() - 3600 * 1000 * 24 * 7) },
                            ]" />
                    </el-form-item>
                </div>

                <!-- 第二列 -->
                <div class="form-column">
                    <el-form-item label="来源凭证编号" prop="certificateNo" class="form-item">
                        <el-input v-model="ruleForm.certificateNo" placeholder="输入凭证编号" clearable>
                            <template #prefix>
                                <el-icon>
                                    <Document />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="详细来源说明" prop="sourceDetail" class="form-item">
                        <el-input v-model="ruleForm.sourceDetail" type="textarea" :rows="4" placeholder="请输入详细来源信息"
                            maxlength="500" show-word-limit resize="none" />
                    </el-form-item>
                </div>
            </div>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="provenanceSourceStore.changeOpen" class="cancel-btn">
                    取消
                </el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef)" class="confirm-btn">
                    <el-icon>
                        <CircleCheck />
                    </el-icon>
                    保存变更
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<style scoped>
.edit-btn {
    transition: all 0.3s;

    &:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
}

.provenance-dialog {
    :deep(.el-dialog__header) {
        border-bottom: 1px solid #eee;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;

        .el-dialog__title {
            font-size: 1.2rem;
            color: #333;
            font-weight: 600;
        }
    }

    .form-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        padding: 0 1rem;
    }

    .form-item {
        margin-bottom: 1.5rem;

        :deep(.el-form-item__label) {
            font-weight: 500;
            color: #606266;
            padding-bottom: 0.5rem;
        }

        .el-input,
        .el-textarea,
        .el-date-editor {
            --el-input-border-radius: 8px;
            --el-input-bg-color: #f8f9fa;
            transition: all 0.3s;

            &:hover {
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            }

            &:focus-within {
                background: #fff;
                box-shadow: 0 0 0 2px var(--el-color-primary-light-5);
            }
        }

        .el-icon {
            margin-right: 8px;
            color: var(--el-color-primary);
        }
    }

    .dialog-footer {
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
        padding-top: 1.5rem;
        border-top: 1px solid #eee;
        margin-top: 1.5rem;

        .cancel-btn {
            &:hover {
                color: var(--el-color-primary);
                border-color: var(--el-color-primary-light-3);
            }
        }

        .confirm-btn {
            padding: 10px 24px;
            border-radius: 8px;
            transition: all 0.3s;

            &:hover {
                transform: translateY(-1px);
                box-shadow: 0 2px 6px var(--el-color-primary-light-3);
            }
        }
    }
}

@media (max-width: 768px) {
    .form-container {
        grid-template-columns: 1fr !important;
    }
}
</style>
